<template name="package-detail">
	<view class="pkgdetail">
		<view class="pkg-cover" v-show="!isOpened">
			<yu-toast ref="toast" message="收到一封祝福锦囊" verticalAlign="top"></yu-toast>
			<view class="pkg-head">
				<view class="pkg-head-stamp">
					<image class="pkg-head-img" :src="coverImagePath" mode="aspectFill"></image>
				</view>
			</view>
			<view class="pkg-body">
				<view class="pkg-text" @click="showSenderLocation"><text class="iconfont iconlocate pkg-loc-icon" v-if="content.sender.location"></text>
					{{fromText}}</view>
				<view class="pkg-text-note">{{time2now}}寄往</view>
				<view class="pkg-text">{{toText}}</view>
				<view class="pkg-text pkg-text-location" v-if="content.target.location" @click="showTargetLocation"><text class="iconfont iconlocate pkg-loc-icon"></text>
					{{content.target.location}}</view>
			</view>
			<view class="pkg-btn" @click="openPkgDetail">開</view>
		</view>
		<!-- content.status=='public' -->
		<view class="pkg-cover page__bd" v-if="content.content && (previewMode || content.status=='public')" v-show="isOpened">
			<view class="weui-article">
				<view class="weui-article__section">
					<view class="weui-article__p">致{{content.target.location?' '+content.target.location+' ':''}}{{content.target.name ? content.target.name : '所有人' }}：</view>
					<view class="weui-article__p">{{content.content}}</view>
				</view>
				<view class="weui-article__section">
					<view class="weui-article__p to_right">{{content.sender.name ? content.sender.name : '匿名'}}</view>
					<view class="weui-article__p to_right">{{timeStr}}</view>
					<view class="weui-article__p to_right" v-if="content.sender.location" @tap="showMap">{{content.sender.location}}<text
						 class="iconfont iconlocate"></text></view>
				</view>
			</view>
			<image-list class="images" :numPerRow="6" :imgIds="content.imgList" :addBtn="false"></image-list>
		</view>
		<image-swiper v-else v-show="isOpened" :starBtn="true" :imageArray="img4display" @ontapcancel="closePkgDetail"></image-swiper>
		<!-- 感谢 -->
		<view class="thank" v-if="!previewMode">
			<view class="thank-btn" @click.stop.prevent="thankPkg(content._id)">
				<text :class="'iconfont iconheart '+(content.myThank?'mythank':'')"></text>
				<text class="thank-btn-text" v-if="content.thanks>0"> ({{content.thanks}})</text>
			</view>
			<view class="thank-btn" @click.stop.prevent="sendBack">回寄</view>
		</view>

		<icon class="close" type="cancel" color="#666" size="32" @click="hideComponent"></icon>

		<link rel="prefetch" :href="img.path" v-for="img in img4display">
	</view>
</template>

<script>
	import yuToast from '@/components/yu-toast/yu-toast'
	import ImageSwiper from './image-swiper.vue'
	import ImageList from './image-list.vue'
	import utils from '../common/function.js'
	import sys from '../common/sys.js'
	import {
		CrystalImage,
		Package
	} from '../common/service.js'
	const moment = require('../common/moment.min.js')
	// console.log(moment)
	import momentZhCN from '../common/moment-locale-zh-cn.js'
	momentZhCN.default(moment)
	const IMAGE = new CrystalImage()
	const PKG = new Package()

	export default {
		name: 'package-detail',
		components: {
			ImageSwiper,
			yuToast,
			ImageList
		},
		props: {
			content: {
				type: Object,
			},
			open: {
				type: Boolean,
				default: false,
			},
			previewMode:{
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				isOpened: this.open,
			}
		},
		computed: {
			fromText: function() {
				return this.processRegion(this.content.sender.region)
			},
			toText: function() {
				return this.processRegion(this.content.target.region)
			},
			time2now: function() {
				return moment(this.content.time).fromNow()
			},
			timeStr: function() {
				return utils.chineseTime(new Date(this.content.time))
			},
			img4display: function() {
				return this.content.imgList.map(utils.genImgFromId)
			},
			coverImagePath: function() {
				if (this.img4display.length > 0) {
					return this.img4display[0].path
				} else {
					return 'https://cdn.water-crystal.org/images/Love_and_Thanks.jpg'
				}
			}
		},
		mounted() {
			if(!this.previewMode) this.$nextTick(function() {
				this.$refs.toast.show()
			})
		},
		methods: {
			processRegion(region) {
				let [country, province, city, district] = region
				if (country == '中国') {
					let cr = new utils.ChinaRegion(province, city, district)
					return cr.toString()
				} else {
					return region.join(', ')
				}
			},
			showSenderLocation: utils.freq(1000, function() {
				sys.toast_loading('加载地图')
				let [lon, lat] = this.content.sender.gps
				sys.openLocation(lon, lat)
			}),
			showTargetLocation: utils.freq(1000, function() {
				sys.toast_loading('加载地图')
				let [lon, lat] = this.content.target.gps
				sys.openLocation(lon, lat)
			}),

			openPkgDetail: utils.freq(1000, function() {
				// console.log(this.img4display)
				this.isOpened = true
			}),
			closePkgDetail: utils.freq(1000, function() {
				this.isOpened = false
			}),

			hideComponent: utils.freq(1000, function() {
				if(this.isOpened) this.isOpened = false
				else this.$emit('ontapcancel')
			}),

			thankPkg: utils.freq(1000, function(packageId) {
				let thanks = this.content.thanks
				if (this.content.myThank) {
					PKG.cancelThank(packageId)
					thanks--
				} else {
					PKG.thank(packageId)
					thanks++
				}
				this.content.myThank = !this.content.myThank
				this.content.thanks = thanks
			}),

			sendBack: function() {
				// sys.navigateTo('receive?id='+this.content._id)
				sys.navigateTo('send?target='+encodeURIComponent(JSON.stringify(this.content.sender)))
			},
		}
	}
</script>

<style>
	@import "../static/weui.min.css";

	.pkgdetail {
		position: fixed;
		top: 0;
		background-color: rgba(255, 255, 255, 0.9);
		width: 100%;
		height: 100%;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
		display: flex;
		z-index: 250
	}

	.pkg-cover {
		position: relative;
		box-sizing: border-box;
		color: #fff;
		padding: 1em;
		height: 360px;
		margin: auto;
		width: 250px;
		/* min-width: 20em; */
		/* max-width: 25em; */
		overflow: hidden;
		border-radius: 1em;
		background: #c40b00;
	}

	.pkg-head {
		top: -150px;
		left: 0;
		right: 0;
		height: 250px;
		position: absolute;
		border-radius: 100%;
		background: #b00b00;
	}

	.pkg-head-stamp {
		left: 0;
		right: 0;
		bottom: -30px;
		margin: auto;
		width: 86px;
		height: 86px;
		position: absolute;
		padding: 5px;
		background: radial-gradient(transparent 0px, transparent 3px, white 4px, white);
		background-size: 12px 12px;
		background-position: -6px -6px;
		display: flex;
		justify-content: space-around;
	}

	.pkg-head-img {
		width: 80px;
		height: 80px;
		margin: auto;
		background-color: #FFF;
	}

	.pkg-body {
		margin-top: 130px;
		text-align: center;
	}

	.pkg-text {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pkg-text-note {
		color: rgb(223, 223, 223);
		font-size: small;
	}

	.pkg-loc-icon {
		color: rgb(231, 231, 231);
		font-size: small;
		/* position: absolute;
  left:12px;
  top: -2px; */
	}

	.pkg-btn {
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		bottom: 20px;
		left: 0;
		right: 0;
		margin: auto;
		outline: 0;
		width: 80px;
		height: 80px;
		color: #fff;
		border: none;
		font-size: 36px;
		cursor: pointer;
		background: #ffb03a;
		border-radius: 100%;
	}
	.close {
		position: fixed;
		top: 64px;
		right: 20px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.close-btn {
		color: #666;
		border: 1px solid #666;
		padding: 2px 6px 0 6px;
		border-radius: 4px;
	}

	.thank {
		position: fixed;
		bottom: 32px;
		left: 0px;
		right: 0px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		justify-content: space-around;
	}

	.thank-btn {
		color: #666;
		/* margin-left: auto;
  margin-right: auto; */
		border: 1px solid #666;
		padding: 2px 6px 0 6px;
		border-radius: 4px;
		display: flex;
		align-items: center;
	}

	.thank-btn-text {
		font-size: small;
	}

	.mythank {
		color: #F33;
	}

	.to_right {
		text-align: right;
	}

	.page__bd {
		color: #fff;
		padding: 1.2ex;
		height: auto;
		margin: auto;
		width: 250px;
		/* min-width: 20em; */
		/* max-width: 25em; */
		overflow: hidden;
		border-radius: 1em;
		/* border: 1px solid #aaa; */
		/* background: #FFF; */
		background: url('https://cdn.water-crystal.org/image/paper.jpg');
		/* background: #c40b00; */
	}

	.weui-article {
		color: #000000;
		margin: 0;
		padding: 0;

		/* box-shadow: 4px 4px 5px; */
		/* background: url('https://cdn.water-crystal.org/image/paper.jpg'); */
	}

	.images {
		padding: 10px 0 0 0;
	}
</style>
